import { Component, OnInit } from '@angular/core';
import { FormControl,FormArray,FormGroup,FormBuilder,Validators} from '@angular/forms';
import { mobileValidate,passwordValidate,mobileAsyncValidator } from '../validators/formsValidators';
@Component({
  selector: 'app-reactive-register',
  templateUrl: './reactive-register.component.html',
  styleUrls: ['./reactive-register.component.css']
})
export class ReactiveRegisterComponent implements OnInit {

  //定义表单的绑定处理，这个表单包含用户名，手机号码和密码，确认密码两个处理
  // registerFrom:FormGroup = new FormGroup({
  //   username:new FormControl('happykala'),
  //   telephone:new FormControl('18963970962'),
  //   passwordsGroup:new FormGroup({
  //     password:new FormControl(),
  //     repeatpassword:new FormControl()
  //   })
  // });

  //定义一个表单group
  registerFrom:FormGroup;
  constructor(fb:FormBuilder) {
    //定义和表单页面对应的formgroup 
    this.registerFrom = fb.group({
      username:['',[Validators.required,Validators.minLength(6)]],
      telephone:['',mobileValidate,mobileAsyncValidator],
      passwordsGroup:fb.group({
        password:['',[Validators.minLength(6)]],
        repeatpassword:['']
      },{validator:passwordValidate})
    });
  }
  ngOnInit() {
  }

  /**
   * @description 
   */
  onSubmit(){
    //this.registerFrom.get('username').valid，这个可以对应的获取到当前的输入值是否符合验证的要求
    console.log(this.registerFrom.get('username').valid)
  }

}
